<template>
    <div class="sys-topBtn">
        <div>
            <div class="ulNameBox" v-show="showInput">
                <div class="showInputClose">
                    <span @click=" showInput = false">x</span>
                </div>
                <Title style="margin-top:50px">
                    <slot>
                        <p style="margin-left:20px">
                            {{showInputTitle}}
                        </p>
                    </slot>
                </Title>
                <ul> 
                    <li>
                        <el-input
                            ref="saomaInput"
                            size="mini"
                            v-model="locatorNo"
                            placeholder="请输入库位号"
                            :disabled= islocatorNo
                        ></el-input>
                        <span>库位号：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="placeType"
                        placeholder="请输入区域类型"
                        :disabled= isplaceType
                        ></el-input>
                        <span>区域类型：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="itemCode"
                        placeholder="请输入图号"
                        :disabled= isitemCode
                        ></el-input>
                        <span>图号：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="maxQty"
                        placeholder="请输入最大数量"
                        :disabled= ismaxQty
                        ></el-input>
                        <span>最大数量：</span>
                    </li>
                    <!-- <li>
                        <el-input
                        size="mini"
                        v-model="status"
                        placeholder="请输入内容"
                        :disabled= isstatus
                        ></el-input>
                        <span>货位状态：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="lengths"
                        placeholder="请输入内容"
                        :disabled= islengths
                        ></el-input>
                        <span>物料长度：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="widths"
                        placeholder="请输入内容"
                        :disabled= iswidths
                        ></el-input>
                        <span>货位宽度：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="heights"
                        placeholder="请输入内容"
                        :disabled= isheights
                        ></el-input>
                        <span>货位高度：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="weight"
                        placeholder="请输入内容"
                        :disabled= isweight
                        ></el-input>
                        <span>最大承受重量：</span>
                    </li> -->
                    <li style="text-align:right">
                        <el-button size="mini" type="primary" @click="confirmChangeInfoBtn" class="confirmBtn">{{btnValue}}</el-button>
                    </li>
                </ul>
                <div style="text-align:center">
                    <el-button size="mini" type="primary" @click="confirmChangeInfoBtn">保存</el-button>
                    <el-button size="mini" type="primary" @click="showInput = false">取消</el-button>
                </div>
            </div>
        </div>
        <div style="margin:5px 0">
            <el-button size="mini" type="primary" @click="addInfoBtn">新增</el-button>
            <el-button size="mini" type="primary" @click="changeInfoBtn">修改</el-button>
            <el-button size="mini" type="danger" @click="deleteInfoBtn">删除</el-button>
        </div>
    </div>
</template>
<script>
import { sysLgoodsShelvesChange,sysLgoodsShelvesAdd,sysLgoodsShelvesDelete } from "@/utils/api.js"
import Title from "../../../../../components/TableTitle.vue"
export default {
    name:'SysTopBtn',
    components:{
        Title
    },
    data(){
        return{
            // 操作弹窗
            showInput:false,
            // 弹窗title
            showInputTitle:'',
            wmsLocatorId:'',
            locatorNo:'',
            placeType:'',
            itemCode:'',
            maxQty:'',
            status:'',
            lengths:'',
            widths:'',
            heights:'',
            weight:'',
            // 输入框禁用绑定
            islocatorNo:false,
            isplaceType:false,
            isitemCode:false,
            ismaxQty:false,
            isstatus:false,
            islengths:false,
            iswidths:false,
            isheights:false,
            isweight:false,
            // 确认按钮内容
            btnValue:'',
            cheakInfo:[],
            deleteList:[]
        }
    },
    methods:{
        // 新增按钮
        addInfoBtn(){
            this.showInput = true
            this.showInputTitle = '新增编辑'
            this.btnValue = '确认新增'
            // 清空所有input
            this.locatorNo = ''
            this.placeType = ''
            this.itemCode = ''
            this.maxQty = ''
            // this.status = ''
            // this.lengths = ''
            // this.widths = ''
            // this.heights = ''
            // this.weight = ''
            // 开放所有input
            this.islocatorNo = false
            this.isplaceType = false
            this.isitemCode = false
            this.ismaxQty = false
            // this.iswidths = false
            // this.isheights = false
            // this.isweight = false
            
        },
        // 修改按钮
        changeInfoBtn(){
            if(this.cheakInfo.length == 1){
                this.btnValue = '确认修改'
                this.showInputTitle = '修改编辑'
                this.showInput = true

                // this.islocatorNo = true;
                // this.isplaceType = true;
                // this.isitemCode = true;
                // this.ismaxQty = true;
                // this.isstatus = false;
                // this.islengths = false;
                // this.iswidths = true;
                // this.isheights = true;
                // this.isweight = true;
                this.wmsLocatorId = '';
                this.locatorNo = '';;
                this.placeType = '';
                this.itemCode = '';
                this.maxQty = '';
                // this.status = '';
                // this.lengths = '';
                // this.widths = '';
                // this.heights = '';
                // this.weight = '';
                this.wmsLocatorId = this.cheakInfo[0].wmsLocatorId;

                this.locatorNo = this.cheakInfo[0].locatorNo;
                this.placeType = this.cheakInfo[0].placeType;
                this.itemCode = this.cheakInfo[0].itemCode;

                this.maxQty = this.cheakInfo[0].maxQty;
                // this.status = this.cheakInfo[0].status;
                // this.lengths = this.cheakInfo[0].length;
                // this.widths = this.cheakInfo[0].width;
                // this.heights = this.cheakInfo[0].height;
                // this.weight = this.cheakInfo[0].weight;
                // document.querySelector('.confirmBtn').style.display = 'inline'
            }else {
                this.$Alert({
                    title: "失败",
                    message: '请勾选一条数据进行修改！',
                    type: "error",
                });
            }
        },
        // 确认按钮
        confirmChangeInfoBtn(){
            if(this.btnValue == '确认修改'){
                sysLgoodsShelvesChange({
                    wmsLocatorId:this.wmsLocatorId,

                    locatorNo:this.locatorNo,

                    placeType:this.placeType,
                    itemCode:this.itemCode,
                    maxQty:this.maxQty,
                    // status:this.status,
                    // length:this.lengths,
                    // width:this.widths,
                    // height:this.heights,
                    // weight:this.weight,
                }).then((res)=>{
                    console.log('修改',res)
                    if(res.data.retCode == 200){
                        this.$Alert({
                            title: "成功",
                            message: res.data.message,
                            type: "success",
                        });
                        // 关闭弹窗
                        this.showInput = false
                        // 
                        this.islocatorNo = false
                        this.isplaceType = false
                        this.isitemCode = false
                        this.ismaxQty = false
                        // this.isstatus = false
                        // this.islengths = false
                        // this.iswidths = false
                        // this.isheights = false
                        // this.isweight = false
                        this.locatorNo = ''
                        this.placeType = ''
                        this.itemCode = ''
                        this.maxQty = ''
                        // this.status = ''
                        // this.lengths = ''
                        // this.widths = ''
                        // this.heights = ''
                        // this.weight = ''
                        // 修改刷新Table并定位页数
                        this.$bus.$emit('sysLgsRefreshTable','刷新')
                    }else {
                        this.$Alert({
                            title: "失败",
                            message: res.data.message,
                            type: "error",
                        });
                    }
                })
            }else if(this.btnValue == '确认新增'){
                sysLgoodsShelvesAdd({
                    locatorNo:this.locatorNo,
                    placeType:this.placeType,
                    itemCode:this.itemCode,
                    maxQty:this.maxQty,
                    // status:this.status,
                    // length:this.lengths,
                    // width:this.widths,
                    // height:this.heights,
                    // weight:this.weight,
                }).then((res)=>{
                    if(res.data.retCode == 200){
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    // 关闭弹窗
                    this.showInput = false
                    // this.islocatorNo = true
                    // this.isplaceType = true
                    // this.isitemCode = true
                    // this.ismaxQty = true
                    // this.isstatus = true
                    // this.islengths = true
                    // this.iswidths = true
                    // this.isheights = true
                    // this.isweight = true
                    this.locatorNo = ''
                    this.placeType = ''
                    this.itemCode = ''
                    this.maxQty = ''
                    // this.status = ''
                    // this.lengths = ''
                    // this.widths = ''
                    // this.heights = ''
                    // this.weight = ''
                    // 修改刷新Table并定位页数
                    this.$bus.$emit('sysLgsRefreshTable','刷新')
                    }else {
                        this.$Alert({
                            title: "失败",
                            message: res.data.message,
                            type: "error",
                        });
                    }
                })
            }
        },
        // 删除按钮
        deleteInfoBtn(){
            sysLgoodsShelvesDelete({
                wmsLocatorIds:this.deleteList
            }).then((res)=>{
                if(res.data.retCode == 200){
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    // 刷新Table并定位页数
                    this.$bus.$emit('sysLgsRefreshTable','刷新')
                }else {
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        }
    },
    mounted(){
      // 将勾选的数据信息给 TopBtn-修改按钮-删除按钮 
      this.$bus.$on('sysLgsChange',(e)=>{
        this.cheakInfo = e
        this.deleteList = []
        for(let i=0;i<e.length;i++){
            // let qqlist = {'wmsLocatorId':e[i].wmsLocatorId}
            this.deleteList.push(e[i].wmsLocatorId)
        }
      })
    }
}
</script>
<style scoped>
.sys-topBtn {
    width: 100%;
}
.ulNameBox {
    position: relative;
    width: calc(100% - 200px);
    height: calc(100% - 60px);
    position: absolute;
    top: 60px;
    left: 200px;
    z-index: 99;
    background: white;
}
.showInputClose {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
.ulNameBox ul {
    margin-top: 5px;
    overflow: hidden;
}
.ulNameBox ul li {
  float: left;
  width: 21%;
  height: 30px;
  line-height: 30px;
  margin-right: 1%;
  margin-bottom: 5px;
  overflow: hidden;
}
.ulNameBox ul li span {
  float: right;
}
.ulNameBox ul li div {
  float: right;
}
.el-input {
    width: 130px;
}
.confirmBtn {
    display: none;
}
</style>